<template>
  <div class="login">
    <h1 style="text-align: center; font-size: 50px;color: #2575fc; margin-top: 50px">公租房后台管理系统</h1>
    <div class="login-container">
      <h2>管理员登录</h2>
      <el-form :model="loginForm" @submit.native.prevent="handleLogin">
        <el-form-item label="账号">
          <el-input v-model="loginForm.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="text-align: left;">验证码</div>
          <div class="captcha-container">
            <el-input v-model="loginForm.captcha" placeholder="请输入验证码"></el-input>
            <span class="login-code" @click="refreshCode">
              <dentify :identifyCode="identifyCode"></dentify>
            </span>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  
<script>
import dentify from "@/components/Dentify";
export default {
  name: "LoginView",
  components: {
    dentify
  },
  data() {
    return {
      loginForm: {
        account: "",
        password: "",
        captcha: ""
      },
      code: "",
      identifyCodes: "1234567890abcdefjhijklinopqrsduvwxyz",
      identifyCode: ""
    };
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    handleLogin() {
      if (this.loginForm.captcha !== this.identifyCode) {
        this.$message.error("验证码错误");
        this.refreshCode();
        return;
      }
      this.$axios
        .post("admin/login", this.loginForm)
        .then(res => {
          if (res.data.code === 200) {
            this.$message.success("登录成功");
            this.$store.commit("setIsLogin", true);
            this.$store.commit("setLoginAdmin", res.data.data);
            this.$router.push(
              "/index",
              () => {},
              () => {}
            );
          } else {
            this.$message.error(res.data.message);
            this.refreshCode();
          }
        })
        .catch(err => {
          this.$message.error(err.message);
          this.refreshCode();
        });
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += o[this.randomNum(0, o.length)];
      }
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    }
  }
};
</script>
  
<style scoped>
.login {
  background: url("../assets/loginBackground.jpeg") no-repeat;
  background-size: cover;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  16.67% {
    background-position: 100% 50%;
  }
  33.33% {
    background-position: 200% 50%;
  }
  50% {
    background-position: 300% 50%;
  }
  66.67% {
    background-position: 400% 50%;
  }
  83.33% {
    background-position: 500% 50%;
  }
  100% {
    background-position: 600% 50%;
  }
}

.login-container {
  width: 300px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background: linear-gradient(
    270deg,
    #ffaa99,
    #ffcc99,
    #dd88ff,
    #88aaff,
    #ffb47f,
    #ff7fbd
  );
  background-size: 1200% 1200%;
  animation: gradient 60s ease infinite;
  text-align: center;
}

.login-container h2 {
  color: #333;
  margin-bottom: 30px;
}

.el-form-item {
  margin-bottom: 20px;
}

.captcha-container {
  display: flex;
}

.captcha-container .el-input {
  flex: 1;
}

.login-code {
  width: 100px; /* 调整验证码宽度 */
  height: 35px;
  margin-left: 10px;
  border-radius: 5px;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: normal;
  margin-top: 4px;
}

.links {
  margin-top: 20px;
  text-align: center;
}

.links a {
  color: #0061a9;
  text-decoration: none;
  margin: 0 10px;
}

.links a:hover {
  text-decoration: underline;
}
</style>
  